<template>
  <div id="app" @scroll="handleAppScroll">
    <!-- <keep-alive :include="keepAliveListStr">
      <router-view />
    </keep-alive> -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <PageLoading v-show="pageLoading" />
  </div>
</template>
<script>
import PageLoading from '@/components/page-loading'
import { state } from '@/custom-store/global.js'
import { constantRouterMap } from '@/router/router.config.js'

const getKeepAliveList = (list) => {
  return list.filter(e => {
    return e && e.name && e.meta && e.meta.keepAlive
  }).map(route => {
    return route.name
  })
}

export default {
  name: 'App',

  components: {
    PageLoading
  },

  computed: {
    pageLoading() {
      return state.loading
    }
  },

  data() {
    return {
      keepAliveList: [],
      keepAliveListStr: ''
    }
  },

  created() {
    this.keepAliveList = getKeepAliveList(constantRouterMap)
    this.keepAliveListStr = this.keepAliveList.join(',')
  },

  watch: {
    $route: {
      handler(newVal, oldVal) {
        this.handleRouterScroll(newVal, oldVal)
      }
    }
  },

  mounted() {
  },

  methods: {
    handleRouterScroll(newVal, oldVal) {
      let scrollTop = 0
      let node
      if ((node = document.querySelector('#app'))) {
        scrollTop = node.scrollTop
      }
      if (oldVal && oldVal.meta) {
        oldVal.meta.scrollTop = scrollTop
      }
      if (newVal && newVal.meta && newVal.meta.keepAlive) {
        if (node) {
          this.$nextTick(() => {
            node.scrollTop = newVal.meta.scrollTop
          })
        }
      } else {
        node.scrollTop = 0
      }
    },
    handleAppScroll(e) {
      // console.log(e)
      // console.log(e.target.scrollTop)
    }
  }

}
</script>
<style lang="scss">
#app, html, body {
  height: 100%;
  overflow: hidden;
}
</style>
